<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../res/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../res/plugins/datatable/css/dataTables.bootstrap.css"/>
    <link rel="stylesheet" href="../../res/plugins/datatable/extensions/FixedHeader/css/fixedHeader.bootstrap.css">
</head>
<body>

<div style="width:80%;margin: 20px auto;">
    <table id="example" class="display table table-bordered table-hover" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
        </tfoot>
    </table>
</div>

<div class="row">
    <div class="col-md-2">1</div>
    <div class="col-md-3">2</div>
    <div class="col-md-7">3</div>
</div>
<div id="pageInfo"></div>
<div>
    <input type="text" id="jumpInput"/>
    <button id="jumpBtn">Go</button>
</div>

<script id="operationBtn" type="text/html">
    <div class="operation-wrapper">
        <a href="javascript:;"class="btn btn-link btn-sm detail">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查看
        </a>
        <a href="javascript:;"class="btn btn-link btn-sm update">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
        </a>
        <div class="dropdown inline-block">
            <a href="javascript:;" class="btn btn-link btn-sm dropdown-toggle" data-toggle="dropdown">
                更多 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">导出</a></li>
                <li><a href="#">拨打电话</a></li>
                <li><a href="#">联系人信息</a></li>
            </ul>
        </div>
    </div>
</script>


<div style="height: 300px;"></div>
    <style>
        .inline-block{
            display: inline-block;
        }
        div.operation-wrapper{
            white-space: nowrap;
        }

        div.operation-wrapper a.btn{
            padding-left: 3px;
            padding-right: 3px;
        }
    </style>
    <script src="../../res/plugins/jquery/jquery-2.2.0.min.js"></script>
    <script src="../../res/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="../../res/plugins/datatable/js/jquery.dataTables.js"></script>
    <script src="../../res/plugins/datatable/js/dataTables.bootstrap.js"></script>
    <script src="../../res/plugins/datatable/extensions/FixedHeader/js/dataTables.fixedHeader.js"></script>


    <script>
        /**
         <div class="row">
         <div class="col-md-2">1</div>
         <div class="col-md-3">2</div>
         <div class="col-md-7">3</div>
         </div>

         <"row" <"col-md-2" l > <"col-md-3" i > <"col-md-7" p > <"clear">>

         */


        $(document).ready(function() {



            var table = $('#example').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "http://localhost:9988/ssm-maven-project/employee/list1.json",
                    "type": "GET",
                    "data": function ( d ) {
                        console.log("data............");
                        console.log(d);
                        console.log($(this));
                        //var info = table.page.info();
                        //console.log(info);

                        /**
                        d.pageIndex = d.draw;
                        d.pageSize = d.length;
                        delete d.draw;
                        delete d.length;
                        delete d.columns;
                        delete d.order;
                        delete d.search;
                         **/
                        //d = null;
                        //d.myKey = "myValue";
                        // d.custom = $('#myInput').val();
                        // etc
                    }
                },
                /**
                 * : "account3"
                 : "2016-03-03 00:00:00"
                 contactPhone: "1513698524"
                 currentAddress: "四川省成都市武侯区AAAAAAAAAAAAAAA3"
                 : 1
                 domicile: "四川3"
                 domicileAddress: "四川省成都市高新区ABCDEFGHIJKLMN3"
                 email: "abcd1234zxcv3qq.com"
                 hireTime: "2016-03-03 15:37:41"
                 id: 144
                 idCard: "512345678912345613"
                 name: "员工名称3"
                 nation: "汉族"
                 password: "pwd3"
                 : "18812345613"
                 qq: "123453"
                 state: 1
                 weixin: "ASDFGH1234563"
                 **/
                "columns": [
                    { "data": "name" },
                    { "data": "account" },
                    { "data": "birthday" },
                    { "data": "departmentId" },
                    { "data": "phone" },
                    { "data": "qq" }
                ],
                /**
                "columnDefs": [ {
                    "targets": [ 5 ],
                    "data": null,
                    orderable: false,
                    width : "150px",
                    "render": function ( data, type, full, meta ) {
                        var str = $("#operationBtn").html();
                        return str;
                    }
                } ],
                **/
                "dom": 'rt<"row" <"col-md-2" l > <"col-md-3" i > <"col-md-7" p >> <"clear">',
                "order": [[ 3, "desc" ]],
                fixedHeader: true,
                "pagingType": "full_numbers",
                "lengthMenu": [ 10, 25, 50, 75, 100 ], //pageSize
                //"pageLength": 3,    //pageIndex
                "displayStart": 20,
                "language": {
                    "decimal":        "",
                    "emptyTable":     "没有数据1",
                    "infoPostFix":    "infoPostFix.....",
                    "thousands":      ",",
                    "loadingRecords": "正在加载数据...",
                    "processing":     "正在获取数据...",
                    "search":         "搜索:",
                    "lengthMenu": "每页显示 _MENU_ 行",
                    "zeroRecords": "没有数据2",
                    "info": "当前第_PAGE_页,总共_PAGES_页/_TOTAL_行",
                    "infoEmpty": "没有数据3",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    paginate: {
                        first:    '首页',
                        previous: '上一页',
                        next:     '下一页',
                        last:     '尾页'
                    }
                }
            });

            /**
            $('#example').on( 'page.dt', function () {
                var info = table.page.info();
                console.log(info);
                $('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
            } );
             **/

            /**
            $('#jumpBtn').on( 'click', function () {
                var pageIndex = $("#jumpInput").val();
                pageIndex = parseInt(pageIndex);
                table.page(pageIndex).draw( 'page' );
            } );
             **/



        } );



    </script>
</body>
</html>